<template>
  <ul>
    <li
      v-for="(item, index) in toolsData"
      :key="item.id"
      @click="toview(index)"
      :class="activeIndex === index ? 'active' : ''"
    >
      <span class="list-icon">
        <img :src="activeIndex === index ? item.aicon : item.icon" alt=""
      /></span>
      <span>{{ item.title }}</span>
    </li>
  </ul>
  <teleport to="body">
    <autoDialog
      :isInit="initData"
      v-show="flag"
      class="dialog"
      :title="toolsData[activeIndex]?.title"
      @close="close"
    >
      <div class="dialog-content">
        <onlineSurvey v-show="activeIndex === 0" />
        <location v-show="activeIndex === 1" />
        <spatialAnalysis v-show="activeIndex === 2" />
        <viewerBookMark v-show="activeIndex === 5" />
        <lineNavigation v-show="activeIndex === 4" />
        <AreaNavigation v-show="activeIndex === 3" />
      </div>
    </autoDialog>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'
import onlineSurvey from './onlineSurvey.vue'
import location from './location.vue'
import spatialAnalysis from './spatialAnalysis.vue'
import viewerBookMark from './viewerBookMark.vue'
import lineNavigation from './lineNavigation.vue'
import AreaNavigation from './AreaNavigation.vue'
import { options_analyse } from '../../../../js/test'
const flag = ref(false)
const activeIndex = ref(-1)
const toolsData = [
  {
    id: 1,
    title: '在线测量',
    icon: '/static/assets/3d/zxcl.png',
    aicon: '/static/assets/3d/zxcl-a.png'
  },
  {
    id: 2,
    title: '坐标定位',
    icon: '/static/assets/3d/zbdw.png',
    aicon: '/static/assets/3d/zbdw-a.png'
  },

  {
    id: 3,
    title: '空间分析',
    icon: '/static/assets/3d/kjfx.png',
    aicon: '/static/assets/3d/kjfx-a.png'
  },
  {
    id: 4,
    title: '地区导航',
    icon: '/static/assets/3d/dqdh.png',
    aicon: '/static/assets/3d/dqdh-a.png'
  },
  {
    id: 5,
    title: '路线导航',
    icon: '/static/assets/3d/lxdh.png',
    aicon: '/static/assets/3d/lxdh-a.png'
  },
  {
    id: 6,
    title: '视角书签',
    icon: '/static/assets/3d/sjsq.png',
    aicon: '/static/assets/3d/sjsq-a.png'
  },
  {
    id: 7,
    title: '卷帘对比',
    icon: '/static/assets/3d/jldb.png',
    aicon: '/static/assets/3d/jldb-a.png'
  }
]

const initData = ref(false)

watch(
  () => [activeIndex.value, flag],
  () => {
    initData.value = !initData.value
  }
)

const toview = (i) => {
  if (i === 6) {
    if (activeIndex.value == i) {
      options_analyse.卷帘 = !options_analyse.卷帘;
       map3d.switchSplitScreen(options_analyse.卷帘)
      activeIndex.value = -1
      return
    }
    options_analyse.卷帘 = !options_analyse.卷帘
    map3d.switchSplitScreen(options_analyse.卷帘)
    flag.value = false
    activeIndex.value = i
    return
  }
  if (activeIndex.value == i) {
    activeIndex.value = -1
    flag.value = false
    return
  }
  if( options_analyse.卷帘){
   options_analyse.卷帘 = false;
      map3d.switchSplitScreen(options_analyse.卷帘)
  }
 
  activeIndex.value = i
  flag.value = true
}

const close = () => {
  activeIndex.value = -1;
  flag.value = false
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
  text-align: center;
  height: 60px;
  opacity: 1;
  background: rgba(0, 19, 39, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  box-sizing: border-box;
  color: #b9eeff;
  font-size: 20px;
  &:hover {
    background: #051420;
  }
  .list-icon {
    width: 30px;
    height: 30px;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
.active {
  background: #051420;
  color: #01c2ff;
}
.dialog {
  position: absolute;
  bottom: 95px;
  right: 323px;
  color: #b9eeff;
  z-index: 99;
  // width: 0;
  // height: 0;
  .dialog-content {
    height: calc(100% - 35px);
  }
}
</style>